<template>
	<view class="login-page">
		<view class="banner">
			<u--image :src="bannerImage" mode="widthFix" width="100vw" height="50vh"></u--image>
		</view>
		<view class="title">
			<view class="icon"></view>
			<view class="welcome action-title">欢迎登录&nbsp;&nbsp;事件管理</view>
		</view>
		<view class="content">
			<view class="action-box action-title">
				<view class="z-index-999">{{title}}</view>
				<view class="box-title"></view>
			</view>
			<Login v-show="moduleConfig[ModuleEnum.login].show" @check="checkModule" />
			<Logon v-show="moduleConfig[ModuleEnum.logon].show" @check="checkModule" />
			<Retrieve v-show="moduleConfig[ModuleEnum.retrieve].show" @check="checkModule" />
		</view>
	</view>
</template>

<script>
	import bannerImage from "../../static/login/banner.png"
	import Login from "./components/login/Login.vue"
	import Logon from "./components/logon/Logon.vue"
	import Retrieve from "./components/retrieve/Retrieve.vue"
	import {
		ModuleEnum,
		ModuleConfig
	} from "./config"
	export default {
		components: {
			Login,
			Logon,
			Retrieve
		},
		data() {
			return {
				bannerImage,
				ModuleEnum,
				moduleConfig: JSON.parse(JSON.stringify(ModuleConfig)),
				title: ModuleConfig[ModuleEnum.login].title
			}
		},
		onLoad() {

		},
		methods: {
			checkModule(obj) {
				const {
					enumKey
				} = obj;
				this.title = ModuleConfig[enumKey].title;
				Object.keys(this.moduleConfig).map(key => this.moduleConfig[key].show = key === enumKey)
			}
		},
	}
</script>

<style lang="less" scoped>
	@import url("./css/login.css");
	@paddingTop: 30vh;

	.login-page {
		padding-top: @paddingTop;
		height: 100vh;

		.banner {
			position: absolute;
			top: 0;
		}

		.title {
			position: absolute;
			bottom: calc(100vh - @paddingTop + 5vh);
			left: 10vw;

			.icon {
				width: 200rpx;
				height: 200rpx;
				background-color: #ffffff;
				border-radius: 100%;
				box-shadow: 0px 24rpx 26rpx 0px rgba(145, 180, 250, 0.47);
			}

			.welcome {
				margin-top: 60rpx;
			}
		}

		.content {
			position: relative;
			height: calc(100vh - @paddingTop);
			border-radius: 100rpx 100rpx 0 0;
			background-color: #ffffff;
			padding: 90rpx;
		}
	}
</style>
